<template>
	<view class="" style="background-color: #F8F8F8;" v-if="orderInfo">
		<view class="nav-back">
			<top-heigth backTitle="选择支付方式"></top-heigth>
		</view>	
		<view class="content-box">
			<view class="public-box m-t24">
				<view class="pay-font" style="margin-bottom: 32rpx;">订单编号：{{orderCode}}</view>
				<view class="pay-font">需付金额: ¥{{orderInfo.orderAmount}}</view>
			</view>
			<view class="pay m-t24">
				<view class="pay-box">
					<view class="pay-line" @click="payType = 1" v-if="platform != 'mp-h5'">
						<view class="pay-line-l">
							<image src="/static/image/pay-zhi.png" mode=""></image>
							<view class="">支付宝支付</view>
						</view>
						<uv-icon name="/static/image/pay-box2.png" v-if="payType == 1"></uv-icon>
						<uv-icon name="/static/image/pay-box1.png" v-else="payType != 1"></uv-icon>
					</view>
					<view class="pay-line" style="border: none;"  @click="payType = 2">
						<view class="pay-line-l">
							<image src="../../static/image/pay-wx.png"mode=""></image>
							<view class="">微信支付</view>
						</view>
						<uv-icon name="/static/image/pay-box2.png" v-if="payType == 2"></uv-icon>
						<uv-icon name="/static/image/pay-box1.png" v-else="payType != 2"></uv-icon>
					</view>
				</view>
			</view>
			
			<view class="login-but" @click="callPayH5()" v-if="platform == 'mp-h5'">提交</view>
			<view class="login-but" @click="callPay()" v-else>提交</view>
			
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				orderCode: null,
				orderInfo: null,
				payType: 1,
				platform: null
			}
		},
		components: { TopHeigth },
		onLoad(e) {
			const res = uni.getSystemInfoSync()
			/*#ifdef H5*/
			this.platform = 'mp-h5'
			this.payType = 2
			/*#endif*/
			
			/*#ifdef APP-PLUS*/
			this.platform = res.platform
			/*#endif*/
			
			this.orderCode = e.code
			this.getOrderInfo()
		},
		methods: {
			getOrderInfo(){
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/turnTAppOrderInfo',{
					orderCode: this.orderCode
				}).then((res) => {
					this.orderInfo = res.data
				})
			},
			callPayH5(){
				/*#ifdef H5*/
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/payH5',{
					payType: 2,
					orderCode: this.orderCode
				}).then((res) => {
					var orderInfo = res;  //从服务器获取的订单
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId": orderInfo.data.appId, //公众号ID，由商户传入     
							"timeStamp": orderInfo.data.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": orderInfo.data.nonceStr, //随机串     
							"package": orderInfo.data.package,
							"signType": "MD5", //微信签名方式：     
							"paySign": orderInfo.data.sign //微信签名 
						},
						(res) => {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								uni.navigateTo({
									url: "/pages/order/payType?code="+this.orderCode+"&sign=1"
								})
							}
							if(res.err_msg == "get_brand_wcpay_request:fail"){
								uni.navigateTo({
									url: "/pages/order/payType?sign=2"
								})
							}
						}
					);
				})
				/*#endif*/
			},
			callPay(){
				uni.$u.http.post('/api/shop/v1_0/tAppOrderRCA/addTimePay',{
					payType: this.payType,
					orderCode: this.orderCode
				}).then((res) => {
					var orderInfo = res;  //从服务器获取的订单
					uni.getProvider({
					    service: 'payment',
					    success: (res) => {
					        if (this.payType == 1) {
					            uni.requestPayment({
					                "provider": "alipay",   //固定值为"alipay"
					                "orderInfo": orderInfo.data, //此处为服务器返回的订单信息字符串
					                success: (res) => {
					                    var rawdata = JSON.parse(res.rawdata);
					                    console.log("支付成功");
										uni.navigateTo({
											url: "/pages/order/payType?code="+this.orderCode+"&sign=1"
										})
					                },
					                fail: function (err) {
					                    console.log('支付失败:' + JSON.stringify(err));
										uni.navigateTo({
											url: "/pages/order/payType?sign=2"
										})
					                }
					            });
					        }else{
								var params = {
									"appid": orderInfo.data.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
									"noncestr": orderInfo.data.nonceStr, // 随机字符串
									"package": "Sign=WXPay",        // 固定值
									"partnerid": orderInfo.data.partnerid,      // 微信支付商户号
									"prepayid": orderInfo.data.prepayid, // 统一下单订单号 
									"timestamp": orderInfo.data.timeStamp,        // 时间戳（单位：秒）
									"sign": orderInfo.data.sign // 签名，这里用的 MD5/RSA 签名
								}
								console.log("orderInfo.data", params)
								uni.requestPayment({
								    "provider": "wxpay", 
								    "orderInfo": params,
								    success(res) {
										console.log("支付成功", res);
										uni.navigateTo({
											url: "/pages/order/payType?code="+this.orderCode+"&sign=1"
										})
									},
								    fail(e) {
										console.log('支付失败:' + JSON.stringify(err));
										uni.navigateTo({
											url: "/pages/order/payType?sign=2"
										})
									}
								})
							}
					    }
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	.pay{
		padding: 0 32rpx;
		background: #fff;
		border-radius:24rpx;
	}
	.pay-font{
		font-size: 30rpx;
		color: #333;
	}
	.pay-line {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #DDDDDD;
		padding: 32rpx 0;
	}
	.pay-line-l{
		@include flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 28rpx;
		image{
			width: 56rpx;
			height: 56rpx;
			margin-right: 24rpx;
		}
	}
</style>
